<template>
  <view class="tn-car-keyboard">
    <!-- header -->
    <view class="tn-car-keyboard__header">
      <view class="confirm" @tap.stop="handleConfirmEvent">完成</view>
    </view>

    <!-- 内容区域 -->
    <view class="tn-car-keyboard__content">
      <!-- 行数据 -->
      <view
        v-for="(item, index) in keyboardData"
        :key="index"
        class="content__row"
      >
        <!-- 切换按钮 -->
        <view
          v-if="index === 3"
          class="content__item switch"
          hover-class="keyboard-hover"
          :hover-stay-time="150"
          @tap.stop="handleModeSwitch"
        >{{ enMode ? '返回' : 'ABC'}}</view>
        <!-- 每一项的数据 -->
        <view
          v-for="(value, valueIndex) in item"
          :key="valueIndex"
          class="content__item"
          :class="[contentItemClass(value)]"
          :hover-class="disabledNoData.includes(value) ? '' : 'keyboard-hover'"
          :hover-stay-time="150"
          @tap.stop="handleValueClick(value)"
        >{{ value }}</view>
        <!-- 退格键 -->
        <view
          v-if="index === 3"
          class="content__item backspace"
          hover-class="keyboard-hover"
          :hover-stay-time="150"
          @touchstart.stop="handleBackspaceTouch"
          @touchend="clearBackspaceTimer"
        >
          <tn-icon icon="backspace-fill"></tn-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { carKeyboardProps, carKeyboardEmits } from '../../../types/tn-keyboard'
import { provinceData, noData, disabledNoData } from '../lib/carData'
import { computed, ref, watch } from 'vue'
import TnIcon from '../../tn-icon/src/Icon.vue'

const props = defineProps(carKeyboardProps)
const emits = defineEmits(carKeyboardEmits)

// 标记中英文状态
let enMode = ref<boolean>(false)
watch(() => props.langMode, (val: string) => {
  return val === 'en'
})

// 键盘数据
const keyboardData = computed<string[][]>(() => {
  let data: string[][] = []
  // 选择汉字部分
  if (!enMode.value) {
    data[0] = provinceData.slice(0, 10)
    data[1] = provinceData.slice(10, 20)
    data[2] = provinceData.slice(20, 30)
    data[3] = provinceData.slice(30, 37)
  } else {
    data[0] = noData.slice(0, 10)
    data[1] = noData.slice(10, 20)
    data[2] = noData.slice(20, 29)
    data[3] = noData.slice(29, 36)
  }
  return data
})

// contentItem对应的类
const contentItemClass = computed<(value: string) => string>(() => {
  return (value: string) => {
    let clazz: string[] = []
    if (disabledNoData.includes(value)) clazz.push('disabled')
    return clazz.join(' ')
  }
})

// 处理模式切换事件
const handleModeSwitch = () => {
  enMode.value = !enMode.value
}
// 处理backspace触摸事件
let backspaceTouchTimer: number | null = null
const handleBackspaceTouch = () => {
  clearBackspaceTimer()
  emits('backspace')
  backspaceTouchTimer = setInterval(() => {
    emits('backspace')
  }, 250)
}
const clearBackspaceTimer = () => {
  if (backspaceTouchTimer !== null) {
    clearInterval(backspaceTouchTimer)
    backspaceTouchTimer = null
  }
}
// 处理值选中事件
const handleValueClick = (value: string) => {
  if (disabledNoData.includes(value)) return
  emits('change', value)
}
// 处理点击完成事件
const handleConfirmEvent = () => {
  emits('confirm')
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-car-keyboard {
  width: 100%;
  height: 480rpx;

  &__header {
    width: 100%;
    padding: 20rpx 36rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #FFFFFF;
    color: $tn-main-color;
    border-bottom: 1rpx solid #E6E6E6;
  }

  &__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16rpx;
    padding-top: 0;

    .content {
      &__row {
        width: 100%;
        height: 18%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 14rpx;
      }
      &__item {
        height: 100%;
        width: 8%;
        background-color: #FFFFFF;
        margin: 0rpx 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
        font-weight: 400;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.02);

        &.disabled {
          opacity: 0.3;
        }

        &.keyboard-hover {
          background-color: #AAAAAA;
        }

        &.switch, &.backspace {
          flex: 1;
          width: 100%;
        }
        &.backspace {
          font-size: 40rpx;
        }
      }
    }
  }
}
</style>
